<route lang="json5" type="buyRecord">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '财务管理 > 会员购币记录',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false,
    onReachBottomDistance:50,
  },
}
</route>

<script setup lang="ts">
import type { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'
import dayjs from 'dayjs'
import { ref } from 'vue'
import gbiDetail from '@/components/gbi-detail.vue'

const timmer = ref<any>([dayjs().startOf('year').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])

function handleConfirm() {

}
const loadState = ref<LoadMoreState>('loading')
const total = ref(50) // 总条数
const dataList = ref([]) // 列表数据
function loadMore() {
  if (loadState.value === 'finished') {
    console.log('加载完成')
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      console.log('没有更多数据了')
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  loadMore()
})
onReachBottom(() => {
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
const gbiDetailRef = ref()
</script>

<template>
  <view class="wot-list-top-wrap">
    <view class="tag-list">
      <view class="flex items-center pb-8rpx">
        <wd-icon name="time-filled" size="18px" color="#2A90FF" />
        &nbsp;按时间查询
      </view>
      <wd-calendar v-model="timmer" custom-value-class="calendar" class="flex-1" type="daterange" @confirm="handleConfirm" />
    </view>
    <view class="wot-row wot-title">
      <wd-row>
        <wd-col :span="6">
          <view class="wot-item">
            会员ID
          </view>
        </wd-col>
        <wd-col :span="6">
          <view class="wot-item">
            金额 / 购币
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            方式
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            支付
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            时间
          </view>
        </wd-col>
      </wd-row>
    </view>
  </view>

  <view class="wot-list pb-safe">
    <view v-for="(item, index) in dataList" :key="index" class="wot-row">
      <wd-row>
        <wd-col :span="6">
          <view class="wot-item">
            <view>
              <wd-tag bg-color="#7232dd">
                17900055
              </wd-tag>
            </view>
            <view>
              <wd-tag plain>
                套餐支付
              </wd-tag>
            </view>
          </view>
        </wd-col>
        <wd-col :span="6">
          <view class="wot-item">
            <wd-tag bg-color="#07c160" class="mr-10rpx">
              1.00 / 1
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item blue">
            WX
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            <wd-tag bg-color="#07c160">
              成功
            </wd-tag>
            <view class="time">
              2025/08/28
            </view>
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            <wd-tag type="primary" @click="gbiDetailRef.show = true">
              详情
            </wd-tag>
            <view class="time">
              10:48:32
            </view>
          </view>
        </wd-col>
      </wd-row>
    </view>
    <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
    <gbiDetail ref="gbiDetailRef" />
  </view>
</template>

<style scoped lang="scss">
.tag-list {
    padding-left: 40rpx;
    padding-right: 10rpx;
  background-color: #ffffff;
  margin: 10rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  color: #2A90FF;
}

.btn-tag {
  margin: 0 10rpx;
  background-color: $uni-color-primary !important;
}

.time {
  font-size: 24rpx;
  color: #646566;
  line-height: 36rpx;
}

.blue {
    color: #2A90FF;
  }
  :deep(){
    .wd-tag__text{
        font-size: 24rpx;
    }
    .calendar{
    color: #646566;
  }
  }
</style>
